<template>
	<view class="term">
		<view class="lv">
			<!-- <image class="bei" src="../../static/term/neng.png"></image> -->
			<view class="term-center">
				<image class="term-img-logo" src="../../static/term/logo.png"></image>
				<view class="dis" style="margin-bottom: 25rpx;margin-top: 10rpx;">
					<view class="inp" @click="seek">
						<input disabled placeholder="搜索" v-model="seach" />
						<image src="../../static/term/sou.png"></image>
					</view>
					<view class="dis" style="margin-left: 30rpx;width: 20%;text-align: center;font-size: 24rpx;">
						<view @click="news">
							<image style="width: 30rpx; height: 33rpx;" src="../../static/term/xi.png"></image>
							<view>消息</view>
						</view>
						<view @click="punch">
							<image style="width: 33rpx; height: 33rpx;" src="../../static/term/ka.png"></image>
							<view>打卡</view>
						</view>
					</view>
				</view>
				<swiper duration="600" interval="4000" indicator-active-color="#ffffff">
					<swiper-item class="item" v-for="(item,index) in list" :key='index'>
						<image :src="item.imges"></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- <view class="term-bei">
				<view class="term-yuan"></view>
			</view> -->
		</view>
		<view style="margin-top: 150rpx;width: 60%;margin-left: 20%;" v-if="!token">
			<view class="u-text-center" style="font-size: 30rpx ;font-weight: 550;">请登录体验更多功能~~</view>
			<view>
				<u-button :custom-style="customStyle" :hair-line='false'
					@click="$mHelper.to('/pagesB/login/login',true)">登录</u-button>
			</view>

		</view>
		<view class="" v-else-if="!showMap" style="margin-top: 50rpx;width: 60%;margin-left: 20%;">
			<u-empty icon-size="280" text="暂无数据~" src="/static/map/hui.png"></u-empty>
			<view>
				<u-button :custom-style="customStyle" :hair-line='false'
					@click="$mHelper.to('/pages/study/choice/transaction/transaction?pid='+pid,true)">开通会员</u-button>
			</view>
		</view>
		<view v-else>
			<view class="term-list" v-if="listImage.length">
				<view class="list">
					<view class="flex" v-for="(item,index) in listImage" :key="index"
						@click="$mHelper.to('/pages/map/unitList/unitList?id='+item.id)">
						<image :src="item.imgs"></image>
						<view>{{item.unitname}}</view>
					</view>
				</view>
			</view>
			<view class="nuto"></view>
			<!-- end -->
			<view class="term-biao">
				<view class="term-to dis align-items">
					<text style="font-size: 34rpx;">推荐课程</text>
					<text @tap="enter" style="font-size: 24rpx;">查看更多 <u-icon name="arrow-right" size="24"
							color="#ffffff">
						</u-icon></text>
				</view>
				<view>
					<view>
						<view class="term-flex dis" v-for="(item,index) in dataList" :key="index" @tap="look(item)">
							<image class="term-flex-img" mode="scaleToFill" :src="item.imgName"></image>
							<view style="width: 70%;">
								<view class="term-flex-tit">
									{{item.name}}
								</view>
								<view class="dis" style="margin-top: 50rpx;">
									<view class="term-left">学习币：{{item.currency}}</view>
									<view class="term-right">查看详情</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view>
				<view class="nuto"></view>
			</view>
			<!-- 今日推荐课程 -->
			<view class="term-biao" v-if="keList.length">
				<view class="term-to">
					<text style="font-size: 34rpx;">今日推荐课程</text>
				</view>
				<view class="term-flex dis">
					<view class="left" v-for="(item,index) in keList" :key="index">
						<image :src="item.imgName" mode="scaleToFill"></image>
						<view class="tit">{{item.name}}</view>
						<view class="dis align-items">
							<view class="hui66">单独购买</view>
							<view class="term-left">学习币：{{item.currency}}</view>
						</view>
						<view class="dis align-items margin-top25rpx">
							<view class="hui66">拼团价格</view>
							<view class="term-left">学习币：{{item.currency}}</view>
						</view>
						<view class="btn-gou margin-top25rpx" @tap="buy(item)">直接购买</view>
						<view class="btn margin-top25rpx" v-if="item.static == 0" @tap="group(item)">精品拼团</view>
						<view class="btn margin-top25rpx" v-if="item.static == 1" @tap="limit(item)">限时特价</view>
					</view>

				</view>
				<view class="nuto"></view>
			</view>
			<!-- <u-gap height="32" bg-color="#F4F4F4"></u-gap> -->

			<view class="term-biao">
				<view class="term-to">
					<text style="font-size: 34rpx;">岗位课程</text>
					<label>TOP5</label>
				</view>
				<view>
					<view class="term-flex dis" v-for="(item,index) in dataList" :key="index" @tap="look(item)">
						<image class="term-flex-img" mode="scaleToFill" :src="item.imgName"></image>
						<view style="width: 70%;">
							<view class="term-flex-tit">
								{{item.name}}
							</view>
							<view class="dis" style="margin-top: 50rpx;">
								<view class="term-left">学习币：{{item.currency}}</view>
								<view class="term-right">查看详情</view>
							</view>
						</view>
					</view>
					<!-- <view class="dao">到底了~</view> -->
					<u-gap></u-gap>
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="center" width="500" :mask-close-able="false">
			<view style="text-align: center;" class="hui66 padding30rpx">
				<image class="hui_img" src="../../static/map/hui.png"></image>
				<view>开通岗位会员可以拥有</view>
				专属的岗位学习地图，享受岗位内
				全部课程、学习、考评、竞赛权益
			</view>
			<view class="dis choice-line">
				<view class="choice_zan" @click="cancel">暂不开通</view>
				<view class="hui66lv choice_open" @click="transaction">开通会员</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				customStyle: {
					marginTop: '20px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					color: '#fff',
					background: '#00A29A'
				},
				listImage: [],
				tab: [],
				dataList: [],
				ico: 0,
				keList: [],
				seach: '', //搜索
				huoList: [],
				show: false,
				pid: '',
				showMap: false,
			}
		},
		onLoad() {
			//查询首页轮播图列表
			this.CurriculumContrller();
		},
		onShow() {
			if (!this.token) {
				return
			}
			//获取当前用户岗位
			this.getGwInfo();
		},
		// created() {
		// 	this.init()
		// },
		methods: {
			getGwInfo() {
				this.$http.get('app/UserController/addUserPost').then(res => {
					if (res.code == 200) {
						if (this.pid != res.data.pid) {
							//已选择会员
							this.getUser(res.data.pid)
							// this.selectUnitList(res.data.pid)
						}
						this.pid = res.data.pid
						if(res.data.examination==false){
							this.$mHelper.schoolTest(res.data.pid)
						}
						uni.hideLoading();
						if (!res.data.pid) {
							this.$mHelper.toast('请选择岗位')
							setTimeout(function() { 
								uni.navigateTo({
									url: './choice/choice'
								})
							}, 800);
						}
					} else {
						this.$mHelper.toast(res.message)
					}
				})
			},
			// 查询用户是否为当前岗位会员
			getUser(id) {
				this.$http.get('app/UserController/selectUserYESMember', {
					pid: id
				}).then(res => {
					if (res.code == 200) {
						this.showMap = res.data
						//验证完成之后在查询数据
						
						if (res.data) {
							this.init();
						}
					}else{
						this.$mHelper.toast(res.message)
					}
				})
			},
			init() {
				//查询热门10条数据(学习页面的推荐课程，所以课程)
				this.selectList()
				//今日推荐课程（岗位）
				this.selectTodayCourse()
				//查询岗位单元信息
				this.selectUnitList()
				// 查询用户是否为当前岗位会员
				this.addUserPost()
			},
			selectList() {
				// this.$http.get('app/CurriculumContrller/selectCourseList',{gid: uni.getStorageSync('gid')})
				uni.request({
					method: 'GET',
					url: this.$api + '/app/CurriculumContrller/selectCourseList',
					data: {
						gid: this.pid
					},
					header: {
						'token': uni.getStorageSync('token')
					},
					success: (res) => {
						if (res.data.code == 200) {
							this.dataList = res.data.data
						}
						if (res.data.code == 401) {
							uni.navigateTo({
								url: '/pagesB/login/login'
							})
						}
					},
					fail: (err) => {}
				})
			},
			selectTodayCourse() {
				uni.request({
					method: 'GET',
					url: this.$api + '/app/CurriculumContrller/selectTodayCourse',
					data: {
						gid: this.pid
					},
					header: {
						'token': uni.getStorageSync('token')
					},
					success: (res) => {
						if (res.data.code == 200) {

						}
						if (res.data.code == 401) {
							uni.navigateTo({
								url: '/pagesB/login/login'
							})
						}
					},
					fail: (err) => {}
				})
			},
			selectUnitList() {
				uni.request({
					method: 'GET',
					url: this.$api + '/app/PostController/selectUnitList',
					data: {
						postId: this.pid
					},
					header: {
						'token': uni.getStorageSync('token')
					},
					success: (res) => {
						if (res.data.code == 200) {
							this.listImage = res.data.data
						}
						if (res.data.code == 401) {
							uni.navigateTo({
								url: '/pagesB/login/login'
							})
						}
					},
					fail: (err) => {}
				})
			},

			//暂不开通
			cancel() {
				uni.switchTab({
					url: '/pages/term/term'
				})
			},
			//开通会员
			transaction() {
				uni.request({
					method: 'GET',
					url: this.$api + '/app/PostController/selectPostMemberOne',
					header: {
						'token': uni.getStorageSync('token')
					},
					data: {
						postId: this.pid
					},
					success: (res) => {
						if (res.data.code == 200) {
							if (res.data.data.types == 1) {
								uni.navigateTo({
									url: '../study/choice/transaction/transaction?gid=' + this.pid
								})
							} else {

							}
						}
					}
				})
				// uni.navigateTo({
				// 	url:'../study/choice/transaction/transaction'
				// })
			},
			//查询当前是否选择岗位
			addUserPost() {
				uni.request({
					method: 'GET',
					url: this.$api + '/app/UserController/addUserPost',
					header: {
						'token': uni.getStorageSync('token')
					},
					success: (res) => {
						if (res.data.code == 200) {
							if (res.data.data.yesno == false) {
								uni.navigateTo({
									url: './choice/choice'
								})
								return
							}

						} else {

						}
						if (res.data.code == 401) {
							uni.navigateTo({
								url: '/pagesB/login/login'
							})
						}
					},
					fail(err) {}
				})
			},
			//轮播图
			CurriculumContrller() {
				uni.request({
					method: 'GET',
					url: this.$api + '/app/CurriculumContrller/list',
					success: (res) => {
						if (res.data.code == 200) {
							this.list = res.data.data
						} else {}
					},
					fail(err) {}
				})
			},
			//消息
			news() {
				this.$mHelper.to('/pages/term/news/news')
			},
			/**
			 * 打卡
			 * */
			punch() {
				this.$mHelper.to('/pagesA/card/card?type=1')
			},
			//搜索
			seek() {
				this.$mHelper.to('/pages/term/seek/seek')
				// uni.navigateTo({
				// 	url: '/pages/term/seek/seek'
				// })
			},
			//课程详情
			look(i) {
				this.$mHelper.to('/pages/term/course/course?id=' + i.id + '&pid=' + i.pid)

			},
			//拼团购买
			group(i) {

			},
			/*
			//直接购买
			*/
			buy(i) {

			},
			/*
			限时特价
			*/
			limit(i) {

			},
			XINBtn(i) {
				this.ico = i
				uni.showLoading({
					title: '正在加载中...'
				})
				setTimeout(() => {
					uni.hideLoading()
				}, 1000)
			},
			//活动详情
			activity(i) {
				uni.navigateTo({
					url: './activity/activity?id=' + i.id
				})
			},
			//推荐课程查看更多
			enter() {
				this.$mHelper.to('/pages/term/seek/seek?pid=' + this.pid);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.choice_open {
		width: 49%;
		text-align: center;
	}

	.choice_zan {
		border-right: 1rpx solid #dcdcdc;
		text-align: center;
		width: 49%;
		color: #666666;
	}

	.huiyuan {
		width: 35rpx;
		height: 26rpx;
		margin-left: 20rpx;
	}

	.hui_img {
		width: 200rpx;
		height: 190rpx;
	}

	.choice-line {
		border-top: 1rpx solid #dcdcdc;
		height: 80rpx;
		line-height: 80rpx;
	}



	.choice {
		display: flex;
		margin-bottom: 5rpx;
		align-items: center;
	}

	.choice_btn {
		background: #00A29A;
		border-radius: 10rpx;
		padding: 10rpx 40rpx;
		color: #FFFFFF;
	}

	.btn-gou {
		width: 100%;
		border: 1rpx solid #00a29a;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		color: #00a29a;
		border-radius: 8rpx;
	}

	.btn {
		height: 72rpx;
		text-align: center;
		line-height: 72rpx;
		border-radius: 10rpx;
		color: #FFFFFF;
		background-color: #00a29a;
		font-size: 28rpx;
	}

	.huo-img {
		width: 260rpx;
		height: 200rpx;
		border-radius: 10rpx;
	}

	.huo-name {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 15rpx;
	}

	.huo-time {
		border-top-left-radius: 20rpx;
		background: #00A29A;
		border-bottom-right-radius: 20rpx;
		color: #FFFFFF;
		position: absolute;
		padding: 3rpx 15rpx;
		bottom: 0;
	}

	.huo-tit {
		font-size: 24rpx;
		color: #666666;
	}

	.left {
		width: 48%;
		margin-bottom: 52rpx;

		image {
			width: 100%;
			height: 240rpx;
			border-radius: 15rpx;
		}

		.tit {
			margin-top: 10rpx;
			margin-bottom: 25rpx;
		}
	}

	.term-left {
		width: 200rpx;
		height: 48rpx;
		background: #D9F6FF;
		text-align: center;
		font-size: 24rpx;
		line-height: 45rpx;
		border-top-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		padding: 0 10rpx;
		color: #00A29A;
	}

	.term-flex {
		display: flex;
		flex-wrap: wrap;
		margin-top: 25rpx;

		.term-flex-img {
			width: 180rpx;
			height: 180rpx;
			margin-right: 15rpx;
			border-radius: 10rpx;
		}

		.term-flex-tit {
			font-size: 30rpx;
			color: #333333;

		}

		.term-left {
			background: #D9F6FF;
			font-size: 24rpx;
			line-height: 45rpx;
			border-top-left-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
			padding: 0 10rpx;
			color: #00A29A;
			;
		}

		.term-right {
			border: 1rpx solid #00A29A;
			color: #00A29A;
			font-size: 24rpx;
			padding: 4rpx 15rpx;
		}
	}

	.inp {
		width: 80%;
		position: relative;
		margin-right: 25rpx;

		image {
			width: 30rpx;
			height: 30rpx;
			position: absolute;
			left: 20rpx;
			top: 18rpx;
		}

		input {
			// width: 100%;
			background: rgba(255, 255, 255, 0.5);
			color: #FFFFFF;
			border: 1rpx solid #FFFFFF;
			border-radius: 30rpx;
			font-size: 28rpx;
			height: 65rpx;
			padding-left: 65rpx;
		}
	}

	.die {
		background-color: #E5F8F7;
		border-radius: 30rpx;
		height: 60rpx;
	}

	.box1 {
		width: 100%;
		overflow-y: hidden;
		overflow-x: scroll;
		margin-top: 25rpx;
		/* position: relative; */
	}

	.box2 {
		display: flex;
		/* position: absolute; */
	}

	.box2 .li {
		width: 25%;
		height: 60rpx;
		flex-shrink: 0;
		line-height: 60rpx;
		text-align: center;
		color: #333333;
	}

	.term-biao {
		padding: 25rpx;
		margin-top: 20rpx;
	}

	.term-to {
		font-size: 28rpx;
		color: #FFFFFF;
		background-color: #15aaa2;
		border-top-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		padding: 5rpx 15rpx;

		label {
			color: #FFD057;
			margin-left: 20rpx;
		}
	}

	.list {
		display: flex;
		flex-wrap: wrap;
		overflow-x: auto;
		display: -webkit-box;
		-webkit-overflow-scrolling: touch;
		.flex {
			width: 24%;
			// background-color: #007AFF;
			text-align: center;
			image {
				width: 148rpx;
				height: 148rpx;
				border-radius: 5rpx;
			}
		}

	}

	.term-bei {
		height: 50rpx;
		background-color: #15aaa2;
		position: absolute;
		bottom: -25px;
		width: 50%;
		right: 0;
	}

	.term-yuan {
		height: 50rpx;
		background-color: #ffffff;
		border-top-right-radius: 55rpx;
		position: absolute;
		bottom: 0rpx;
		right: 1rpx;
		width: 100%;

	}

	.term-list {
		background-color: #FFFFFF;
		padding: 0rpx 25rpx;
		border-top-right-radius: 55rpx;
		z-index: 100;
	}

	.item {
		width: 100%;
		height: 300rpx;
		border-radius: 20rpx;

		image {
			width: 100%;
			height: 250rpx;
			border-radius: 20rpx;
		}
	}

	.term {
		height: calc(var);

		.lv {
			// background-color: #15aaa2;
			padding-bottom: 40rpx;
			padding-top: 40rpx;
			width: 100%;
			position: relative;
			background-image: url(../../static/images/index_back.png);
			background-size: 100% 100%;
			height: 640rpx;
		}

		.bei {
			width: 100%;
			position: absolute;
			top: 0;
			border-bottom-left-radius: 55rpx;
		}

		.term-center {

			width: 92%;
			margin-left: 4%;
			margin-top: 60rpx;
			z-index: 100;

			.term-img-logo {
				width: 129rpx;
				height: 70rpx;
			}

			color: #FFFFFF;
		}

	}
</style>
